<template>
  <div :class="enable?'button_container':'button_container_enable'"
  @click="onClick">
  <span></span>
    {{buttonTitle}}
  </div>
</template>

<script>
export default {
  data(){
    return{
      enable:true,
      buttonTitle:"点击获取验证码"
    }
  },
  methods:{
    onClick(){
      if(!this.enable){
        return
      }
      window.console.log("111111");
      this.enable = !this.enable;
      var count = 30;
      var timer = window.setInterval(()=>{
        count--;
        this.buttonTitle = `${count}秒后重试`
        if(count === 0){
        this.enable = !this.enable;
        this.buttonTitle = "点击获取验证码"
        window.clearInterval(timer)
      }
      },1000);

      
    }
  }
}
</script>

<style scoped>
.button_container
{
  width: 140px;
  height: 45px;
  border-left: 1px solid gray;
  
}
.button_container span{
  padding-left: 20px;
}
.button_container_enable
{
   width: 140px;
  height: 45px;
  border-left: 1px solid gray;
  /* padding-left: 20px; */
}
.button_container_enable span{
  padding-left: 20px;
}
</style>